<template>
  <div class="login">
      <div class="login-title">
          <span>Marks</span>
          <span>Lee</span>
      </div>

      <van-form @submit="submit" ref="loginForm" @failed="onFailed">
        <van-field
            v-model="form.account"
            name="用户名"          
            placeholder="请填写用户名"
            show-error
            :show-error-message="false"
            :rules="[
                { required: true, message: '请填写用户名' },
                {pattern, message: '账号必须字母开头，长度在5~10之间'}
            ]"
        />
        <van-field
            v-model="form.password"
            type="password"
            name="密码"
            placeholder="请填写密码"
            :rules="[{ required: true, message: '请填写密码' },
                     { validator, message: '密码长度必须为5-20个字符' }]"
        />
        <div>
            <van-button round block  native-type="submit">提交</van-button>
        </div>
        </van-form>

     
  </div>
</template>

<script>
import store from '../store';
export default {
    name:'',
    data(){
        return{
            isHidden:false,
            isPassword:true,
            logs:[],
            form:{
                account:"admin",
                password:"123456"
            },
            pattern: /^[a-zA-Z]\w{3,11}$/
        }
    },
    methods:{
        //   此处使用函数校验
        validator(val) {
            return /^.{5,20}$/.test(val);
        },
        onFailed(errorInfo) {
            // 弹出 错误信息 弹窗
            this.$toast({
                type:'fail',
                message: errorInfo.errors[0].message,
                transition:'index-van-fade-leave-active'
            })
            //console.log('failed', errorInfo);
        },
        submit(val){
            var that = this;
            if(val){
                setTimeout(()=>{
                    store.commit('login',{
                        account:this.form.account,
                        password:this.form.password
                    })
                    store.commit('setMemberInfo',{
                        userStatus:0,
                        vipLevel:0
                    })
                    that.$toast({
                        type:'html',
                        message: '登录成功',
                        transition:'index-van-fade-leave-active',
                        position: 'bottom',
                        duration:1000,
                        onClose(){
                            that.$router.push('/home') 
                        }
                    })
                    
                },500)
            }
           
        }
    }
}
</script>

<style lang="scss">
@function p2r($px){
    @return ($px/40px)*1rem
}

.login{
   width: 100%;
   height: 100%;
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}
.login-title{
    width: p2r(340px);
    height: p2r(80px);
    margin: p2r(160px) 0 p2r(70px) 0;
    // font-size: 1rem;
    font-size: 24px;
    display: flex;
    justify-content: space-around;
    span{
        display: block;
        width: p2r(170px);
        height: p2r(70px);
        text-align: center;
        line-height: p2r(70px);
        &:last-child{
            background-color: peru;
            border-radius: 5px;
            color: #fff;
        }
    }
}
.van-form{
    width: p2r(600px);
    .van-cell{
        width: p2r(600px);
        height: p2r(80px);
        margin: 30px 0;
        border-bottom: 1px solid #999;
        position: relative;
        display: flex;
        padding: 0;
        background: none;
        align-items: center;
        overflow: visible;
    }  
    .van-cell__value,.van-field__body,.van-field__control{
        width: p2r(600px);
        height: p2r(80px);
    }
    .van-field__control{
        font-size: p2r(32px);
    }
}

.section{
    width: p2r(500px);
    height: p2r(80px);
    margin: 5px 0;
    border-bottom: 1px solid #999;
    input{
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        color: #333;
        font-size: p2r(32px);
        line-height: p2r(80px);
    }
}

</style>
